import React, { useEffect, useState } from "react";
import styles from "./Header.module.css";
import logo from "../../assets/logo.svg";
import { Layout, Typography, Input, Menu, Button, Dropdown } from "antd";
import { GlobalOutlined, ShoppingCartOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { useSelector } from "../../hook";
import { useDispatch } from "react-redux";
import {
  changeLanguageActionCreator,
  addLanguageActionCreator,
} from "../../redux/language/languageActions";
import { useTranslation } from "react-i18next";
import jwt_decode, { JwtPayload } from "jwt-decode";
import { userSlice } from "../../redux/User/slice";

interface JWT extends JwtPayload {
  username: string;
}

export const Header: React.FC = () => {
  const history = useHistory();
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const language = useSelector((state) => state.Language.language);
  const languageList = useSelector((state) => state.Language.languageList);
  // const jwt = useSelector((state) => state.user.token);
  // const jwt=sessionStorage.getItem("token")
  const [username, setUsername] = useState("");
  const jwt = useSelector((s) => s.user.token);
  const scloading=useSelector(s=>s.ShopCart.loading)
  const shopCartList=useSelector(s=>s.ShopCart.ShopCartList)
const error=useSelector(s=>s.ShopCart.error)

  useEffect(() => {
    if (jwt) {
      const token = jwt_decode<JWT>(jwt);
      setUsername(token.username);
    }
  }, [jwt]);

  const onLogout = () => {
    dispatch(userSlice.actions.logOut());

    history.push("/sign");
  };

  const menuClick = (e) => {
    if (e.key === "add_new") {
      dispatch(addLanguageActionCreator("新语言", "new"));
    } else {
      dispatch(changeLanguageActionCreator(e.key));
    }
  };
  return (
    <div className={styles["app-header"]}>
      {/* top-header */}
      <div className={styles["top-header"]}>
        <div className={styles.inner}>
          <Typography.Text>让旅游更幸福</Typography.Text>
          <Dropdown.Button
            style={{ marginLeft: 15 }}
            overlay={
              <Menu onClick={menuClick}>
                {languageList.map((item) => {
                  return <Menu.Item key={item.code}>{item.name}</Menu.Item>;
                })}
                <Menu.Item key="add_new">
                  {t("header.add_new_language")}
                </Menu.Item>
              </Menu>
            }
            icon={<GlobalOutlined />}
          >
            {language === "zh" ? "中文" : language === "en" ? "英语" : "新语言"}
          </Dropdown.Button>
          {jwt ? (
            <Button.Group className={styles["button-group"]}>
              <span>
                {t("header.welcome")}
                <Typography.Text strong>{username}</Typography.Text>
              </span>
              <Button loading={scloading}
               onClick={()=>{history.push("/shopcart")}}>{t("header.shoppingCart")}
              </Button>
             {shopCartList.length}
              <Button onClick={onLogout}>{t("header.signOut")}</Button>
            </Button.Group>
          ) : (
            <Button.Group className={styles["button-group"]}>
              <Button onClick={() => history.push("/register")}>
                {t("header.register")}
              </Button>
              <Button onClick={() => history.push("/sign")}>
                {t("header.signin")}
              </Button>
            </Button.Group>
          )}
        </div>
      </div>
      <Layout.Header className={styles["main-header"]}>
        <span onClick={() => history.push("/")} style={{ cursor: "pointer" }}>
          <img src={logo} alt="logo" className={styles["App-logo"]} />
          <Typography.Title level={3} className={styles.title}>
            React旅游网
          </Typography.Title>
        </span>
        <Input.Search
          placeholder={"请输入旅游目的地、主题或关键字"}
          className={styles["search-input"]}
          onSearch={(keywords) => history.push(`/search/${keywords}`)}
        ></Input.Search>
      </Layout.Header>
      <Menu mode={"horizontal"} className={styles["main-menu"]}>
        <Menu.Item key="1"> {t("header.home_page")} </Menu.Item>
        <Menu.Item key="2"> {t("header.weekend")} </Menu.Item>
        <Menu.Item key="3"> {t("header.group")} </Menu.Item>
        <Menu.Item key="4"> {t("header.backpack")} </Menu.Item>
        <Menu.Item key="5"> {t("header.private")} </Menu.Item>
        <Menu.Item key="6"> {t("header.cruise")} </Menu.Item>
        <Menu.Item key="7"> {t("header.hotel")} </Menu.Item>
        <Menu.Item key="8"> {t("header.local")} </Menu.Item>
        <Menu.Item key="9"> {t("header.theme")} </Menu.Item>
        <Menu.Item key="10"> {t("header.custom")} </Menu.Item>
        <Menu.Item key="11"> {t("header.study")} </Menu.Item>
        <Menu.Item key="12"> {t("header.visa")} </Menu.Item>
        <Menu.Item key="13"> {t("header.enterprise")} </Menu.Item>
        <Menu.Item key="14"> {t("header.high_end")} </Menu.Item>
        <Menu.Item key="15"> {t("header.outdoor")} </Menu.Item>
        <Menu.Item key="16"> {t("header.insurance")} </Menu.Item>
      </Menu>
    </div>
  );
};
